<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor);height: 300px">
  <!-- playground-fold-end -->


  <ui5-combobox placeholder="Grouping of items">
    <ui5-cb-item-group header-text="A">
      <ui5-cb-item text="Argentina"></ui5-cb-item>
      <ui5-cb-item text="Australia"></ui5-cb-item>
      <ui5-cb-item text="Austria"></ui5-cb-item>
    </ui5-cb-item-group>
    <ui5-cb-item-group header-text="B">
      <ui5-cb-item text="Bahrain"></ui5-cb-item>
      <ui5-cb-item text="Belgium"></ui5-cb-item>
      <ui5-cb-item text="Brazil"></ui5-cb-item>
    </ui5-cb-item-group>
    <ui5-cb-item-group header-text="C">
      <ui5-cb-item text="Canada"></ui5-cb-item>
      <ui5-cb-item text="Chile"></ui5-cb-item>
    </ui5-cb-item-group>
  </ui5-combobox>
  <!-- playground-fold -->
  <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
